<template>
    <div class="footer">
        <div class="all">
            <label style="display: flex;width:200px;justify-content: space-between;transform: translateY(5px);">
                <label class="container" @click.stop="all($event)">
                    <input type="checkbox" :checked="isChecked">
                    <div class="checkmark"></div>
                </label>
                <span style="transform: translateY(-3px);"> 全选</span>
            </label>
        </div>
        <div class="subbtn">
            <div class="total" style="margin-right: 20px;">
                合计:
                <span>$</span><span style="font-size: 18px;">{{ money }}</span><span>.00</span>
            </div>
            <button @click="submit">提交订单</button>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    name: 'myfooter',

    data() {
        return {
            isChecked: false,
            money: 0
        };
    },
    computed: {
        // ...mapState(["money"]),
        test() {
            return this.$store.state.money
        }
    },
    mounted() {
        this.$bus.$on("changeAll", this.changeAll)
        this.$bus.$on("Cancel", this.Cancel)


    },

    //监视vuex中的money
    watch: {
        test(newValue, oldValue) {
            this.money = newValue
        }
    },

    methods: {
        all(e) {

            e.preventDefault()
            this.isChecked ? this.isChecked = false : this.isChecked = true
            this.$bus.$emit("allChecked", this.isChecked)
        },

        changeAll() {
            this.isChecked = true
        },
        Cancel() {
            this.isChecked = false
        },
        submit() {
            this.$router.push({ name: "address" })
        }

    },
    filters: {

    }
};
</script>

<style lang="less" scoped>
.footer {
    width: 100%;
    height: 219px;
    padding: 0 60px;
    display: flex;
    align-items: center;

    .all {
        display: flex;
        width: 300px;
        height: 100%;
        justify-content: space-between;
        align-items: center;

    }

    .subbtn {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 100%;
        padding: 20px 0;

        .total {
            display: flex;
            // height:100%;
            align-items: flex-end;

            span {
                font-size: 8px;
                color: red;
            }
        }

        .money {
            color: red;
            width: 400px;
            font-size: 88px;
            height: 100%;
            display: flex;

            &::before {
                content: "$";
                font-size: 10px;
            }

            &::after {
                content: ".00";
                font-size: 10px;
            }
        }

        button {
            background-image: linear-gradient(to right, #fd5733, #f7382c, #f11626);
            border: none;
            width: 500px;
            height: 100%;
            color: white;
            border-radius: 100px;
        }
    }
}

/* Hide the default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.container {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 66px;
    user-select: none;
    height: 100px;

}

/* Create a custom checkbox */
.checkmark {
    position: relative;
    top: 0;
    left: 0;
    height: 1.3em;
    width: 1.3em;
    background: transparent;
    border-radius: 50px;
    transition: all 0.7s;
    --spread: 80px;
    border: 1px solid gray;
}

/* When the checkbox is checked, add a blue background */
.container input:checked~.checkmark {
    background: rgb(0, 0, 0);
    box-shadow: -10px -10px var(--spread) 0px #5B51D8, 0 -10px var(--spread) 0px #833AB4, 10px -10px var(--spread) 0px #E1306C, 10px 0 var(--spread) 0px #FD1D1D, 10px 10px var(--spread) 0px #F77737, 0 10px var(--spread) 0px #FCAF45, -10px 10px var(--spread) 0px #FFDC80;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 0.45em;
    top: 0.25em;
    width: 0.25em;
    height: 0.5em;
    border: solid #f0f0f0;
    border-width: 0 0.15em 0.15em 0;
    transform: rotate(45deg);
}
</style>